<template>
  <q-layout view="lHh Lpr fFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          :icon="miniState && miniStrong ? 'format_indent_decrease':'format_indent_increase'"
          aria-label="Menu"
          @click="miniStrong = !miniStrong"
        />

        <q-toolbar-title>
          <q-breadcrumbs active-color="white" style="font-size: 16px">
            <q-breadcrumbs-el label="首页" icon="home" to="/home" />
            <q-breadcrumbs-el v-if="hasGroup" :label="$route.meta.group" />
            <q-breadcrumbs-el v-if="hasGroup && hasTitle" :label="$route.meta.title" />
          </q-breadcrumbs>
        </q-toolbar-title>
      </q-toolbar>
      <tags-view/>
    </q-header>

    <q-drawer
      v-model="drawer"
      side="left"
      show-if-above
      bordered
      :width="200"
      :breakpoint="500"
      :mini="miniState && miniStrong"
      @mouseover="miniState = false"
      @mouseout="miniState = true"
      content-class="bg-grey-1"
    >
      <q-scroll-area class="fit">
        <menu-list :mini-state="miniState"/>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink'
import MenuList from '../components/MenuList'
import TagsView from '../components/TagsView'

export default {
  name: 'MainLayout',

  components: {
    TagsView,
    EssentialLink,
    MenuList
  },
  computed: {
    hasGroup() {
      return this.$route.meta.group!==undefined
    },
    hasTitle() {
      return this.$route.meta.title!==undefined
    }
  },
  data () {
    return {
      drawer: true,
      miniState: false,
      miniStrong: false,
    }
  }
}
</script>
